<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>父子组件</title>
</head>

<body>
    <div id="test"></div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
        class Father extends React.Component {
            state = {
                fatherHaveMoney: false
            }
            render() {
                return <div>
                    <input value="爸爸发财了" type='button' onClick={this.makeMoney} />
                    <button onClick={this.runout} >矿场破产</button>
                    <Son fatherHaveMoney={this.state.havaMoney} />
                </div>
            }
            makeMoney = () => {
                this.setState({ havaMoney: true })
            }
            runout = () => {
                this.setState({ havaMoney: false })
            }
        }
        class Son extends React.Component {
            //第一次不算，以后每次才算
            componentWillReceiveProps() {
                console.log("Son--componentWillReceiveProps")
            }
            render() {
                console.log("Son--render")
                return (
                    <div >
                        {this.props.fatherHaveMoney ? "哈哈，我爸是矿老板😎" : "老爸啥时候给我打钱😭"}
                    </div>
                )
            }
            shouldComponentUpdate() {
                console.log("Son--shouldComponentUpdate")
                return true
            }
            componentDidUpdate() {
                console.log("Son--componentDidUpdate")
            }
        }
        //2 渲染组件到页面 
        ReactDOM.render(<Father />, document.getElementById('test'))
    </script>
</body>

</html>